<template>
  <!-- 数据加载中或为空时显示提示 -->
  <div v-if="!data || !data.list" class="text-center py-[20px] text-[#999]">
    正在加载新闻数据...
  </div>
  
  <!-- 数据为空时显示提示 -->
  <div v-else-if="data.list.length === 0" class="text-center py-[20px] text-[#999]">
    暂无新闻数据
  </div>
  
  <!-- 正常显示新闻列表 -->
  <ul v-else class="newsList pt-[3vh]">
    <li class="text-[#999]">{{ data.name }}({{ data.list.length }})</li>
    <li class="flex flex-col pt-[2vh] border-b-[1px]" v-for="item in data.list" :key="item.id">
      <div class="font-extrabold mb-[1.5vh]">{{ item.newsTitle }}</div>
      <div class="mb-[1.5vh]">{{ item.abstractReal }}</div>
      <span v-if="item.siteName" class="mb-[2vh]">{{ item.siteName }}</span>
      <div class="flex mb-[2vh] leading-[16px]">
        <span class="text-[#999]" v-if="item.opPerson">由{{ item.opPerson }}更新</span>
        <div class="flex-1"></div>
        <el-icon class="text-[#999] border-[1px] rounded-full border-[#999] mr-[0.5vw]">
          <Minus />
        </el-icon>
        <span class="text-[#999] mr-[0.5vw] cursor-pointer" @click="handleRemove(item.id)">移除</span>
        <el-icon class="text-[#999] mr-[0.5vw]">
          <EditPen />
        </el-icon>
        <!-- 点击编辑时传入当前item -->
        <span class="text-[#999] cursor-pointer" @click="handleEdit(item)">编辑</span>
      </div>
    </li>
  </ul>
  
  <!-- 传递当前编辑的单条新闻 -->
  <Editor v-model="showEditor" :data="currentEditItem" /> 
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { Minus, EditPen } from '@element-plus/icons-vue'
import { ref } from 'vue'
import Editor from './Editor.vue'

const props = defineProps(['data'])
const emit = defineEmits(['removeData','update:modelValue'])
const showEditor = ref(false)
const currentEditItem = ref(null)  

const handleEdit = (item) => {
  currentEditItem.value = item  
  showEditor.value = true       
}

const handleRemove = (itemId) => {
  ElMessageBox.confirm(
    '确定要移除这条新闻吗？',
    '确认移除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
      confirmButtonClass: 'bg-primary',
      cancelButtonClass: 'bg-gray-200 text-gray-800'
    }
  )
  .then(() => {
    emit('removeData', itemId)
    emit('update:modelValue', props.data)
  })
  .catch(() => {
    return
  })
}
</script>

<style scoped>

</style>